<template>
  <ul class="items">
    <!-- 展示用户列表 -->
    <li v-show="info.users.length" class="item" v-for="user in info.users" :key="user.login">
      <a :href="user.html_url" target="_blank">
        <div class="img-box">
          <img class="img-center" :src="user.avatar_url" alt="">
        </div>
        <p class="txt">{{user.login}}</p>
      </a>
    </li>

    <!-- 展示欢迎词 -->
    <h1 v-show="info.isFirst">欢迎使用！</h1>
    <!-- 展示加载中 -->
    <h1 v-show="info.isLoading">加载中...</h1>
    <!-- 展示错误信息 -->
    <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
  </ul>
</template>

<script>
  export default {
    name: "List",
    data() {
      return {
        info: {
          isFirst: true,
          isLoading: false,
          errMsg: "",
          users: []
        }
      }
    },
    methods: {
      // https://api.github.com/search/users?q=xxx
      updateListData(dataObj) {
        console.log("收到了", dataObj);
        // this.info = dataObj
        this.info = {...this.info, ...dataObj}      // 与Object.assign()用法相同
      }
    },
    mounted() {
      this.$bus.$on("updateListData", this.updateListData)
    }
  }
</script>

<style lang="less" scoped>
  .items {
    font-size: 0;
    text-align: center;
    .item {
      display: inline-block;
      vertical-align: top;
      width: 33.33333%;
      margin-top: 10px;
      font-size: 14px;
      .img-box {
        position: relative;
        width: 100%;
        height: 240px;
      }
    }
  }
  .img-center {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: auto;
  }
  h1 {
    font-size: 36px;
  }
</style>